<template>
  <div class="header-bg">
    <!-- 头部 -->
    <div class="header">
      <div class="header-left">
        <img class="header-logo" src="~imgs/logo-qiaoke.png" alt="敲客logo">
      </div>
      <div class="header-right">
        <div
          class="iconfont header-list"
          @click="handleListClick"
        >&#xe625;</div>
      </div>
    </div>
    <!-- 头部下拉菜单 -->
    <transition
      name="slide"
      enter-active-class="animated flipInX"
      leave-active-class="animated flipOutX"
    >
      <div
        class="header-cover"
        v-show="showList"
      >
        <ul class="lineOne border-bottom clearfix">
          <router-link
            tag="li"
            to="/"
            class="border-right"
          >
            <span class="iconfont icon-home">&#xe607;</span>
            首页
          </router-link>
          <router-link
            tag="li"
            to="/project"
          >
            <span class="iconfont icon-project">&#xe863;</span>
            案例
          </router-link>
        </ul>
        <ul class="lineTwo">
          <router-link
            tag="li"
            to="/about"
            class="border-right"
          >
            <span class="iconfont icon-about">&#xe7a6;</span>
            关于敲客
          </router-link>
          <router-link
            tag="li"
            to="/contact"
          >
            <span class="iconfont icon-contact">&#xe63e;</span>
            联系我们
          </router-link>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'CommonHeader',
  data () {
    return {
      showList: false
    }
  },
  methods: {
    handleListClick () {
      this.showList = !this.showList
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  .header-bg
    background-color #161A1E
    .header
      display flex
      height .6rem
      background #171B1F
      .header-left
        width 70%
        float left
        line-height .6rem
        text-align center
        .header-logo
          width 1.68rem
          height .28rem
      .header-right
        width 30%
        float right
        .header-list
          width .4rem
          line-height .6rem
          margin-left .4rem
          text-align center
          font-size .38rem
          color white
    .header-cover
      width 100%
      height 1.46rem
      background-color #161A1E
      ul
        height 50%
      li
        width 50%
        height 100%
        line-height 100%
        float left
        color $fontColor
        box-sizing border-box
        padding-top .28rem
        padding-left .55rem
        font-size .18rem
      li span
        display inline-block
        margin-right .05rem
</style>
